<template>
  <div>
    <el-card>
      <el-steps align-center :active="3">
        <el-step title="企业发起签约" />
        <el-step title="个人签署电子协议" />
        <el-step title="签约成功" />
      </el-steps>

      <div class="tipps">
        <div>
          <div>温馨提示:</div>
          <div>1.请准确填写真实用工信息，平台会进行身份校验，校验成功方能发起签约。</div>
          <div>2.单次导入上限500条，签约信息提交后，个人将收到短信提醒签约。</div>
        </div>
      </div>

      <el-row justify="center">
        <el-col :span="8">
          <el-form-item label="签约业务类型:">
            <el-select></el-select>
          </el-form-item>
          <el-form-item label="签约文件导入:">
            <el-button type="primary">导入发起用工签约</el-button>
          </el-form-item>
          <el-form-item>
            <template #label>
              <span style="width: 6rem;"></span>
            </template>
            <el-link type="primary"> 签约导入模板.XLS </el-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 10px;">
      <DynamicForm
        :labelWidth="80"
        style="margin-top: 20px;"
        :searchloading="loading"
        :items="items"
        :model="formModel"
        @update:model="update"
        @onFinish="submit"
      >
      </DynamicForm>

      <el-table :data="tableData" style="width: 100%" height="250">
        <el-table-column fixed prop="date" label="Date" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="320" />
        <el-table-column prop="address" label="Address" width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
const loading = ref(false)
const formModel = ref({})

const items = computed(() => {
  return [
    { prop: 'createTime', label: '创建时间', valueType: 'date', fieldProps: { type: 'daterange' } },
    { prop: 'taskCode', label: '用工姓名', valueType: 'input' },
    { prop: 'title', label: '身份证号', valueType: 'input' },
    { prop: 'taskStatus', label: '手机号', valueType: 'select', options: [] },
    { prop: 'taskType', label: '业务类型', valueType: 'select', options: [] },
    { prop: 'taskType', label: '签约状态', valueType: 'select', options: [] },
  ]
})

const submit = () => {}

const update = value => {
  formModel.value = value
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
]
</script>

<style scoped>

.tipps {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    padding: 15px;
    font-size: 14px;
    border-radius: 5px;
    margin: 20px 0;
}
</style>
